<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
          分组选择器：
            - 作用：同时选中多个选择器对应的元素
            - 语法：选择器1,选择器2,选择器3,...选择器n{}
         */
        /*#p1, .p2, div{
            color: red;
        }
*/
    /*
        上述样式等价于：
            #p1{}

            .p2{}

            div{}
    */

    /*
        关系选择器
            - 根据元素之间的关系来选中元素
            - 元素之间有哪些关系：
                父子、祖先后代、兄弟

            - 子元素选择器
                作用：选中指定元素的子元素
                语法：父元素 > 子元素{}

            - 后代元素选择器
                作用：选中指定元素的后代元素
                语法：祖先 后代{}

            - 兄弟元素选择器
                作用：选中指定的兄弟元素
                语法：
                    兄 + 弟 {}
                        - 选中紧随其后的一个兄弟
                    兄 ~ 弟 {}
                        - 选中后边的所有兄弟元素

    */

        /*
            选中div中的span，将其字体大小设置30px，字体颜色设置为红色
        */
        /*.box1 > span{
            color: red;
            font-size: 30px;
        }*/


        .box1 span{
            color: red;
            font-size: 30px;
        }

        h1 + p {
            color: yellowgreen;
        }

        h1 ~ p {
            color: tomato;
        }
    </style>
</head>
<body>

    <div class="box1">
        <span>今天天气真不错！</span>
        <p>
            <span>天气会一直好下去，我们也一定会一直好下去</span>
        </p>
    </div>


    <hr>
    <h1 class="p2">落霞与孤鹜齐飞</h1>
    <p id="p1">秋水共长天一色</p>
    <p class="p2 p3">先天下之忧而忧，后天下之乐而乐</p>
    <div>大金链子小金表，一天三顿小烧烤</div>
    <h2>哈哈哈</h2>
    <div>
        <span>明天天气也不错</span>
    </div>
    <p>人之初 性本善</p>

    <hr>

<!--
    div + p
-->
    <div>我是div</div>
    <p>我是div后的p元素</p>
    <div>我是div</div>
    <p>我是div后的p元素</p>

</body>
</html>